<template>
  <div
    class="hot-content home-hot-item hot-item-bg"
    :style="{
      backgroundImage: `url(${productObj.backgroundUrl})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'right bottom',
      backgroundSize: '100% 100%'
    }"
  >
    <div v-if="isHot" class="hot-item-top">
      <HotsaleIcon />
    </div>
    <div class="hot-item-title">
      <div>
        {{ productObj.title }}
      </div>
      <img v-if="index === 1" class="hot-item-title-img" src="../img/1.png" />
      <img v-if="index === 2" class="hot-item-title-img" src="../img/2.png" />
      <img v-if="index === 3" class="hot-item-title-img" src="../img/3.png" />
      <img v-if="index === 4" class="hot-item-title-img" src="../img/4.png" />
      <img v-if="index === 5" class="hot-item-title-img" src="../img/5.png" />
      <img v-if="index > 5" class="hot-item-title-img" src="../img/5.png" />
    </div>
    <div class="hot-item-desc">{{ productObj.desc }}</div>
    <div class="hot-item-list">
      <div
        class="hot-item-list-item"
        v-for="item in productObj.labelList"
        :key="item.index"
      >
        {{ item }}
      </div>
    </div>
    <div class="hot-item-money" v-if="productObj.money">
      <span>{{ getSliceData(productObj.money).num }}</span>
      <span class="size">{{ getSliceData(productObj.money).desc }}</span>
    </div>
  </div>
</template>
<script>
import HotsaleIcon from '@/components/hotsale'
export default {
  props: {
    index: {
      type: Number,
      default: 1
    },
    isHot: {
      type: Boolean,
      default: false
    },
    bgColorFrom: {
      type: String,
      default: ''
    },
    bgColorTo: {
      type: String,
      default: ''
    },
    productObj: {
      type: Object,
      default: () => {
        return {
          title: '',
          desc: '',
          money: '',
          labelList: []
        }
      }
    }
  },
  components: { HotsaleIcon },
  data() {
    return {}
  },
  methods: {
    getSliceData(str) {
      var num = parseFloat(str)
      var desc = str.slice(num.toString().length)
      return {
        num,
        desc
      }
    }
  }
}
</script>
<style scoped lang="less">
.home-hot-item {
  width: 167.5px;
  height: 115px;
  // background: #ccc;
  background-image: linear-gradient(#fffef5, #fffce6);
  box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px 0;
  border-radius: 4px;
  padding-top: 22px;
  padding-bottom: 35px;
  box-sizing: border-box;
  .big {
    font-size: 18px;
  }
  .hot-item-title {
    font-size: 13px;
    color: #333;
    font-weight: bold;
  }
  .hot-item-title-img {
    width: 34px;
    height: 4px;
  }
  .hot-item-desc {
    z-index: @c-zindex-header;
    width: 110px;
    padding-right: 10px;
    // padding-top: 10px;
    font-size: 11px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .hot-item-money {
    z-index: @c-zindex-header;
    font-size: 16px;
    color: #ec4001;
    font-weight: bold;
    position: absolute;
    bottom: 5px;
    left: 10px;
    .size {
      font-size: 12px;
    }
  }
}
.hot-item-list {
  margin-top: 3px;
  font-size: 10px;
  .hot-item-list-item {
    display: inline-block;
    z-index: @c-zindex-header;
    margin-right: 5px;
    margin-top: 5px;
    border: 0.5px solid #dd9145;
    border-radius: 2px;
    color: #dd9145;
    text-align: center;
    padding: 2px 5px;
    font-size: 11px;
  }
}
.hot-item-bg {
  background-image: linear-gradient(#fffafa, #fcf6f6);
}
.hot-content {
  position: relative;
  padding-left: 10px;
  .hot-item-top {
    position: absolute;
    top: 0;
    left: 0;
  }
  .hot-item-bgimg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 165px;
    height: 100%;
  }
}
.home-hot-item-one {
  height: 240px;
  .hot-item-title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }
}
</style>
